<script lang="ts" setup>
	import { ref } from "vue";
	import {
		userStore
	} from '@/pinia';
	import {
		getCurrentInstance
	} from 'vue'
	import {
		useRouter
	} from 'uni-mini-router'

	import {
		onShow,
		onHide,
		onLoad,
		onUnload
	} from '@dcloudio/uni-app'

	import * as im from '@/common/im.js';

	const {
		proxy,
	} = getCurrentInstance()
	const userStoreInfo = userStore();
	let router = useRouter()
	let postId = ref('')
	let screenObj = ref({})
	let detailObj = ref({})
	let delShow = ref(false)
	let likeNum = ref(0)
	let collectNum = ref(0)
	onLoad((options) => {
		console.log("进来了")
		console.log(options.id);
		postId.value = options.id
		// screenObj.value = JSON.parse(options.data)
		// getDetail()
	})
	onUnload(() => {
		console.log('gezoule');
		if (isDel.value) {
			uni.$off('refreshLike')
		} else {
			uni.$emit('refreshLike', {
				like: detailObj.value.like,
				likeNum: detailObj.value.likeNum,
				collect: detailObj.value.collect,
				collectNum: detailObj.value.collectNum
			})
		}
	})
	onShow(() => {
		getDetail()
	})
	const getDetail = () => {
		let url;
		if (userStoreInfo.userFlag == 2) {
			url = proxy.$api.zhaoDetail
		} else {
			url = proxy.$api.zhaoDetail
		}
		proxy.$req('GET', url, {
			id: postId.value,
			// userId: userStoreInfo.userInfo.id
		}).then((res) => {
			console.log('获取详情：>> ', res);
			detailObj.value = res.result
			// detailObj.value.coverImages = JSON.parse(res.result.coverImages)
			// detailObj.value.companyProfileImgUrl = JSON.parse(res.result.companyProfileImgUrl)
			// detailObj.value.mainProjectsImgUrl = JSON.parse(res.result.mainProjectsImgUrl)
			// detailObj.value.companyQualificationsImgUrl = JSON.parse(res.result.companyQualificationsImgUrl)
			// detailObj.value.cooperationCaseImgUrl = JSON.parse(res.result.cooperationCaseImgUrl)
			// detailObj.value.cooperationMethodsImgUrl = JSON.parse(res.result.cooperationMethodsImgUrl)

			// detailObj.value.aceProjectImg = JSON.parse(res.result.aceProjectImg)
			// detailObj.value.cooperativeBenefitsImg = JSON.parse(res.result.cooperativeBenefitsImg)
			// detailObj.value.cooperationMethodsImg = JSON.parse(res.result.cooperationMethodsImg)
			// detailObj.value.companyProfileImg = JSON.parse(res.result.companyProfileImg)
			// detailObj.value.teamShowImg = JSON.parse(res.result.teamShowImg)
			// detailObj.value.backgroundImage = JSON.parse(res.result.backgroundImage)
			console.log(detailObj.value, 'detailObj.value');
		})
	}
	const likeAndCollect = (type1, type2) => {
		proxy.$req('POST', proxy.$api.likeAndCollect, {
			id: postId.value,
			moduleType: 6,
			operateType: type1,
			updateType: type2,
			userId: userStoreInfo.userInfo.id
		}).then((res) => {
			console.log(res, "打印点赞的返回");
			uni.showToast({
				title: res.message,
				icon: 'none'
			})
			// if (res.success) {
			// 	getDetail()
			// }	
			if (res.success) {
				detailObj.value.likeNum = res.result.likeNum
				detailObj.value.collectNum = res.result.collectNum
				detailObj.value.like = res.result.like
				detailObj.value.collect = res.result.collect
			}
		})
	}
	const routerLink = () => {
		router.push({
			name: 'gysAddZhao',
			params: {
				id: postId.value,
				data: JSON.stringify(screenObj.value)
			}
		})
	}
	const previewImg = (res) => {
		console.log(res);
		uni.previewImage({
			urls: [res],
			// longPressActions: {
			// 	itemList: ['保存图片'],
			// 	success: function (data) {
			// 		// console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
			// 	},
			// 	fail: function (err) {
			// 		console.log(err.errMsg);
			// 	}
			// }
		});
	}
	const call = (e) => {
		uni.makePhoneCall({
			phoneNumber: e
		})
	}
	//删除
	let isDel = ref(0)
	const delDetail = () => {
		proxy.$req('DELETE', `${proxy.$api.delZhao}?id=${detailObj.value.id}`).then(res => {
			uni.$u.toast(res.message)
			if (res.code != 200) {
				return
			}
			isDel.value = 1
			delShow.value = false
			uni.$emit('inRefash')
			uni.navigateBack()
		})
	}

	// 聊一聊
	const toIm = () => {
		const { memberId } = detailObj.value;
		const userId = userStoreInfo.userInfo.id;
			
		if(userId == memberId){
			alert("不能和自己聊天");
			return ;
		}
		console.log('investmentCenter   detailObj.value', detailObj.value, memberId);
		// console.log('state.detailsData', state.detailsData);
		// #ifdef APP-PLUS
		im.init({
			imFlag: 'investmentCenter',
			toUserId: memberId,
		}, () => {
			router.push({
				// name: 'ConversationListPage',
				name: 'ConversationPage',
			})
		})
		// #endif
	}
</script>
<template>
	<view class="beijing"
		v-if="detailObj.hasOwnProperty('backgroundImage')&&detailObj.backgroundImage!='[]'&&detailObj.backgroundImage!=null"
		:style="{
		backgroundImage:'url(' + JSON.parse(detailObj.backgroundImage)[0].url  + ')'
	}">
		<u-modal :showConfirmButton="false" width="540rpx" :show="delShow" title="提示">
			<view class="modalDel">
				<view class="del">
					确定要删除吗？
				</view>
				<view class='delFoot'>
					<button class="btn1" @click="delShow = false">取消</button>
					<button class="btn2" @click="delDetail()">确定</button>
				</view>
			</view>

		</u-modal>
		<!-- v-if="detailObj.hasOwnProperty('backgroundImage')&&detailObj.backgroundImage!='[]'&&detailObj.backgroundImage!=null"
		:style="{
		backgroundImage:'url(' + JSON.parse(detailObj.backgroundImage)[0].url  + ')'
	}"   navSearch-->
		<view class="">
			<u-navbar :placeholder="true" leftText="" title="" bgColor="rgba(0,0,0,0)" auto-back
				:fixed="false"></u-navbar>
		</view>
		<view class="mdNav">
			<view class="mdnTit ">
				{{ detailObj.title }}
			</view>
			<view class="mdnCon">
				<view class="" @click="likeAndCollect(0,detailObj.like?'unlike':'like')">
					<u-icon :name="detailObj.like?'thumb-up-fill':'thumb-up' "
						:color="detailObj.like?'#CB645E':'' "></u-icon>
					<text class="haha"
						:style="{color:detailObj.like?'#CB645E':''}">{{ detailObj.likeNum>0?detailObj.likeNum:0 }}</text>
				</view>
				<view class="" @click="likeAndCollect(1,detailObj.collect?'uncollect':'collect')">
					<u-icon :name="detailObj.collect?'heart-fill':'heart'"
						:color="detailObj.collect?'#CB645E':'' "></u-icon>
					<text class="haha" v-if="detailObj.collectNum"
						:style="{color:detailObj.collect?'#CB645E':''}">{{ detailObj.collectNum>0?detailObj.collectNum:0 }}</text>
					<text class="haha" v-else>0</text>
				</view>
				<view class="">
					<u-icon name="eye"></u-icon>
					<text class="haha">{{ detailObj.viewNum }}</text>
				</view>
			</view>
		</view>
		<view class="allDetail">
			<view class="mdDetail">
				<view class="mddTit">
					公司介绍
				</view>
				<view class="">
					{{detailObj.companyProfile}}
				</view>
				<view class="mddRich">
					<u-scroll-list :indicator="false"
						v-if="detailObj.hasOwnProperty('companyProfileImg')&&detailObj.companyProfileImg.length>0">
						<view v-for="(item, index) in JSON.parse(detailObj.companyProfileImg)" :key="index">
							<view class="scrollItem">
								<image :src="item.thumb" @click="previewImg(item.thumb)"></image>
							</view>
						</view>
					</u-scroll-list>
				</view>
			</view>
			<view class="mdDetail">
				<view class="mddTit">
					团队展示
				</view>
				<view>
					{{detailObj.teamShow}}
				</view>
				<view class="mddRich">
					<u-scroll-list :indicator="false"
						v-if="detailObj.hasOwnProperty('teamShowImg')&&detailObj.teamShowImg.length>0">
						<view v-for="(item, index) in JSON.parse(detailObj.teamShowImg)" :key="index">
							<view class="scrollItem">
								<image :src="item.thumb" @click="previewImg(item.thumb)"></image>
							</view>
						</view>
					</u-scroll-list>
				</view>
			</view>

			<view class="mdDetail">
				<view class="mddTit">
					王牌项目
				</view>
				<view class="">
					{{detailObj.aceProject}}
				</view>
				<view class="mddRich">
					<u-scroll-list :indicator="false"
						v-if="detailObj.hasOwnProperty('aceProjectImg')&&detailObj.aceProjectImg.length>0">
						<view v-for="(item, index) in JSON.parse(detailObj.aceProjectImg)" :key="index">
							<view class="scrollItem">
								<image :src="item.thumb" @click="previewImg(item.thumb)"></image>
							</view>
						</view>
					</u-scroll-list>
				</view>
			</view>
			<view class="mdDetail">
				<view class="mddTit">
					合作方式
				</view>
				<view class="">
					{{detailObj.cooperationMethods}}
				</view>
				<view class="mddRich">
					<u-scroll-list :indicator="false"
						v-if="detailObj.hasOwnProperty('cooperationMethodsImg')&&detailObj.cooperationMethodsImg.length>0">
						<view v-for="(item, index) in JSON.parse(detailObj.cooperationMethodsImg)" :key="index">
							<view class="scrollItem">
								<image :src="item.thumb" @click="previewImg(item.thumb)"></image>
							</view>
						</view>
					</u-scroll-list>
				</view>

			</view>
			<view class="mdDetail">
				<view class="mddTit">
					合作福利
				</view>
				<view class="">
					{{detailObj.cooperativeBenefits}}
				</view>
				<view class="mddRich">
					<u-scroll-list :indicator="false"
						v-if="detailObj.hasOwnProperty('cooperativeBenefitsImg')&&detailObj.cooperativeBenefitsImg.length>0">
						<view v-for="(item, index) in JSON.parse(detailObj.cooperativeBenefitsImg)" :key="index">
							<view class="scrollItem">
								<image :src="item.thumb" @click="previewImg(item.thumb)"></image>
							</view>
						</view>
					</u-scroll-list>
				</view>
			</view>
			<view class="mdDetail">
				<view class="mddTit">
					公司地址
				</view>
				<view class="address">
					{{detailObj.companyAddress}}
				</view>
			</view>
		</view>
		<view class="btmBtn"
			v-if="userStoreInfo.userFlag==2 && detailObj.supplierId == userStoreInfo.userInfo.supplier.id">
			<view class="bbItem shiti" @click="routerLink">
				编辑
			</view>
			<view class="bbItem loukong" @click="delShow = true">
				删除
			</view>
		</view>
		<view class="btmBtn" v-else>
			<view class="bbItem shiti" @click="toIm">
				在线咨询
			</view>
			<view class="bbItem loukong" @click="call(detailObj.contactPhone)">
				拨打电话
			</view>
		</view>
	</view>
</template>
<style lang="scss">
	page {
		background-color: #f7f7f7;
	}

	.beijing {
		background-size: 100%;
		background-repeat: no-repeat;
		background-color: #F8FCFF;
	}

	.modalDel {
		.del {
			text-align: center;
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: rgba(0, 0, 0, 0.45);
		}

		.delFoot {
			margin-top: 50rpx;
			display: flex;
			justify-content: space-between;

			.btn1 {
				width: 206rpx;
				height: 88rpx;
				background: rgba(255, 255, 255, 0);
				border: 2rpx solid #CB645E;
				color: #CB645E;
				border-radius: 15rpx;
				margin: 0 15rpx;
			}

			.btn2 {
				width: 206rpx;
				height: 88rpx;
				background: #CB645E;
				color: #FFFFFF;
				border-radius: 15rpx;
				margin: 0 15rpx;
			}
		}
	}

	.navSearch {
		width: 100%;
		height: 482rpx;
		background-size: 100%;
		// background-color: #e7e7e7;
	}

	.mdNav {
		width: calc(100% - 64rpx);
		padding: 40rpx 32rpx;
		// background-color: #fff;
		color: #000;

		.mdnTit {
			font-size: 32rpx;
			font-weight: 600;
			margin-bottom: 56rpx;
		}

		.mdnCon {
			display: flex;
			justify-content: flex-start;
			align-items: center;
			margin-bottom: 106rpx;

			view {
				display: flex;
				justify-content: center;
				align-items: center;
				// margin: 0 10rpx;
				margin-right: 10rpx;

				.haha {
					font-size: 28rpx;
					margin-right: 90rpx;
				}
			}
		}
	}

	.allDetail {
		width: 622rpx;
		margin: 0 auto;
		// margin-top: 90rpx;
		// background-color: #fff;
		// box-shadow: 8rpx 8rpx 32rpx 0rpx rgba(0, 0, 0, 0.04);
		border-radius: 24rpx;
		// border: 2rpx solid #FFFFFF;
		color: #000;
		font-size: 28rpx;
	}

	.mdDetail {
		width: 622rpx;
		// padding: 32rpx;
		color: #000;

		.mddTit {
			height: 80rpx;
			line-height: 80rpx;
			font-size: 32rpx;
			font-family: PingFangSC-Semibold, PingFang SC;
			font-weight: 600;
			color: #000000;
			// color: #fff;
		}

		.mdd {
			height: 80rpx;
			line-height: 80rpx;
			font-size: 29rpx;
			font-family: PingFangSC-Semibold, PingFang SC;
			font-weight: 600;
			color: #000000;
		}


		.mddRich {
			text {
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: rgba(0, 0, 0, 0.65);
			}

			.scrollItem {
				margin: 10rpx 10rpx;

				image {
					width: 280rpx;
					height: 200rpx;
				}

				text {
					font-size: 26rpx;
				}
			}
		}

		// .mddRich {
		// 	text {
		// 		font-size: 26rpx;
		// 	}
		// }
	}

	.btmBtn {
		width: calc(100% - 64rpx);
		margin: 0 auto;
		height: 144rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 10rpx;

		.bbItem {
			width: 328rpx;
			height: 80rpx;
			line-height: 80rpx;
			font-size: 32rpx;
			border-radius: 20rpx;
			text-align: center;
		}

		.loukong {
			background-color: #CB645E;
			color: #fff;
		}

		.shiti {
			border: 2rpx solid #CB645E;
			color: #CB645E;
		}
	}
</style>